<template>
  <div class="padding10" >
    <div class="box box-custom">
      <div class="box-header with-border">
        <h3 class="box-title">系统用户分组</h3>
        <button type="button" class="btn btn-custom pull-right" v-on:click="showAdd">添加分组</button>
      </div>
      <div class="box-body">
      <el-table class="top10" style="width: 100%;"
      :data="organizationData"
      border stripe size='mini' height="480">
        <el-table-column
         prop="name"
         label="分组名称"
         width="260">
        </el-table-column>
        <!-- el-table-column
         prop="phone"
         label="联系电话"
         width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180">
        </el-table-column -->
        <el-table-column
        prop="description"
        label="备注"
        width="100">
        </el-table-column>
        <el-table-column
        label="操作"
        width="300">
          <template slot-scope="scope">
            <!-- @click="handleClick(scope.row)" -->
            <el-button type="text" size="small" @click="showEditDialog(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
            <el-button type="text" size="small" @click="delUser(scope.row.id)"><span class="danger"><i class="el-icon-delete"></i> 删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination v-if="dataTotal>0"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      layout="prev, pager, next, total"
      :total="dataTotal">
      </el-pagination>
    </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div>
      <form>
        <div class="input-group">
          <span class="input-group-addon">机构名称</span>
          <input type="text" class="form-control" v-model="formData.name" />
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">登录域名</span>
          <input type="text" class="form-control" v-model="formData.domainName" />
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">可访问问卷</span>
          <el-select size="mini" v-model="formDataQuestionnaires" v-on:change="setFromDateOwnSurvey" multiple collapse-tags>
            <el-option
              v-for="item in questionnaires"
              :key="item.id"
              :label="item.suName"
              :value="item.id">
            </el-option>
          </el-select>
          <!-- input type="text" class="form-control" v-model="formData.ownSurvey" / -->
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">Logo</span>
          <div>
            <div class="col-sm-5">
              <input type="file" name="img" accept="image/*" v-on:change="addImg($event)">
            </div>
            <div class="col-sm-5">
              <img id="previewImg" :src="formData.imgUrl" width="100"/>
            </div>
          </div>
        </div>
        <!-- div class="input-group top10">
          <span class="input-group-addon">联系电话</span>
          <input type="text" class="form-control" v-model="formData.phone" />
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">地 址</span>
          <input type="text" class="form-control" v-model="formData.address" />
        </div -->
        <div class="input-group top10">
          <span class="input-group-addon">备注</span>
          <textarea class="form-control" rows="3" v-model="formData.description"></textarea>
        </div>
        <!-- div class="input-group top10">
          <span class="input-group-addon">状 态</span>
          <select class="form-control" v-model="formData.disabled">
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
        </div -->
        <div class="input-grop top20 center">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="success" @click="onSubmit">提 交</el-button>
        </div>
      </form>
      </div>
    </el-dialog>
    <el-dialog id="assessmentDialog" width="70%"
    title="新增机构评估"
    :visible.sync="assessmentDialog"
    :before-close="handleClose2">
      <newAssessIns ref="assessIns" :institutionData="institution" @closeDialog="()=> assessmentDialog = flase"></newAssessIns>
    </el-dialog>
    <el-dialog width="60%"
    title="展示历史评估结果"
    :visible.sync="showResultDialog"
    :before-close="handleCloseShowResult">
      <assessmentResult ref="assessmentResult" :personnel="institution" :assessmentData="resultData" :notShare="true"></assessmentResult>
    </el-dialog>
  </div>
</template>
<script>
import newAssessIns from '../assessment/newAssessIns.vue'
import assessmentResult from '../assessment/assessmentResult.vue'
export default {
  name: 'organization',
  components: {
    newAssessIns,
    assessmentResult
  },
  data () {
    return {
      organizationData: [],
      formData: {},
      dialogTitle: '',
      dialogVisible: false,
      dataTotal: 0,
      page: 1,
      pageSize: 10,
      // 问卷列表
      questionnaires: [],
      formDataQuestionnaires: {},
      // 问卷调查对话框
      assessmentDialog: false,
      institution: {},
      // 评估结果
      resultData: {},
      showResultDialog: false
    }
  },
  prpos: {
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    handleClose2 (done) {
      this.$confirm('关闭窗口会丢失当前未完成的调查记录数据,确认关闭？')
      .then(_ => {
        // 关闭前清空未完成的调查数据
        this.$refs.assessIns.clearAll()
        done()
      })
      .catch(_ => {})
    },
    handleCloseShowResult (done) {
      this.$refs.assessmentResult.clearAll()
      done()
      this.resultData = {}
      this.institution = {}
    },
    handleCurrentChange (val) {
      this.page = val
    },
    addImg (ev) {
      let fileObj = ev.target.files[0]
      if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        alert("请选择图片")
        return
      }
      // 创建读取文件的对象
      var reader = new FileReader();

      //为文件读取成功设置事件  
      reader.onload = function(e) {  
        $('#previewImg').attr('src', e.target.result)
      }

      // 正式读取文件
      reader.readAsDataURL(fileObj)
      
      //加入文件对象
      let formFile = new FormData()
      formFile.append("file", fileObj)
      this.$http.post('file/uploadLogoFile', formFile).then(
        response => {
          this.formData.logo = this.formData.imgUrl = response.data.data.url
          this.formData.imgFullPath = response.data.data.fullPath
          ev.target.value = null
        }
      )
    },
    getDataList () {
/*
      let formData = new FormData()
      formData.append('pageIndex', this.page)
      formData.append('pageSize', this.pageSize)
      formData.append('username', '')
*/
      this.$http.get('organization/getAll').then(
        response => {
          // this.organizationData = response.data.data.data
          // this.dataTotal = response.data.data.totalElements
          // this.page = response.data.data.pageNum
          this.organizationData = response.data.data
        }
      )
    },
    getQuestionnaires () {
      this.$http.get('listSurvey').then(
        response => {
          this.questionnaires = response.data.data
        }
      )
    },
    showAdd () {
      this.formData = {}
      this.dialogTitle = '添加机构'
      this.formData = {}
      if (this.questionnaires.length === 0) {
        this.getQuestionnaires()
      }
      this.formDataQuestionnaires = []
      this.dialogVisible = true
    },
    showEditDialog (row) {
      this.formData = row
      this.formData.imgUrl = this.formData.logo
      this.dialogTitle = '编辑机构信息'
      if (this.questionnaires.length === 0) {
        this.getQuestionnaires()
      }
      if (row.ownSurvey && row.ownSurvey.length > 0) {
        this.formDataQuestionnaires = row.ownSurvey.split(',')
        this.formDataQuestionnaires.map(
          (questionnaireId, index) => { 
            this.formDataQuestionnaires[index] = parseInt(questionnaireId)
          }
        )
      }
      this.dialogVisible = true
    },
    setFromDateOwnSurvey () {
      this.formData.ownSurvey = (this.formDataQuestionnaires.length > 0 ? this.formDataQuestionnaires.join(',') : '')
    },
    onSubmit () {
      this.formData.id ? this.addData() : this.updateData()
    },
    updateData () {
/*
      let formData = new FormData()
      for (let key in this.formData) {
        formData.append(key, this.formData[key])
      }
*/
      this.$http.post('organization/save', this.formData).then(
        response => {
          console.log('编辑成功')
          this.dialogVisible = false
          this.formData = {}
          this.getDataList()
        },
        response => {
          alert(response.body.message)
          console.log('error', response)
        }
      )
    },
    addData () {
/*
      let formData = new FormData()
      for (let key in this.formData) {
        formData.append(key, this.formData[key])
      }
*/
      this.$http.post('organization/save', this.formData).then(
        response => {
          console.log('添加成功')
          this.dialogVisible = false
          this.formData = {}
          this.getDataList()
        },
        response => {
          alert(response.body.error ? (response.body.error + response.body.message) : response.body.message)
          console.log('error', response)
        }
      )
    },
    delUser (id) {
      if (confirm('确认删除？') === false ) return false
      this.$http.get('organization/delete/' + id).then(
        response => {
          console.log('删除成功')
          this.getDataList()
        },
        response => {
          alert(response.message)
          console.log('error', response)
        }
      )
    },
    addAssessIns (organization) {
      this.institution = organization
      this.assessmentDialog = true
    },
    showAssessmentResult (assessmentResultId, organization) {
      this.institution = organization
      this.$http.get('surveyAnswerIns/findOneById?id=' + assessmentResultId).then(
        response => {
          this.resultData = response.data.data
          this.showResultDialog = true
        }
      )
    }
  },
  created () {
    this.getDataList()
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-group{margin-bottom: 10px;}
.input-group-addon{min-width: 120px; text-align: right;}
</style>
